<div class="cly-vue-worldmap">
    <div class="bu-columns bu-is-gapless" style="height: 100%;">
        <div v-if="showNavigation" v-loading="navigationLoading" class="bu-column bu-is-3 cly-vue-worldmap__list">
            <div class="cly-vue-worldmap__back-button bu-p-4" @click="goToMain" v-if="inDetail">
                <span class="text-medium"><- {{i18n("countries.back-to-map")}}</span>
            </div>

            <div class="geo-chart-left-side-wrapper bg-white" v-if="!inDetail" :style="inDetailWrapperStyle">
                <div class="cly-vue-worldmap__list-title bu-p-2">
                    <span class="bu-pl-2 text-uppercase text-small font-weight-bold">{{countriesTitle}}</span>
                </div>
                <cly-listbox
                    style="height: calc(100% - 38px);"
                    v-if="locations.length > 0"
                    skin="jumbo"
                    height="auto"
                    :searchable="true"
                    :bordered="false"
                    :options="locations"
                    :value="country"
                    :disabled="loading"
                    @input="goToCountry($event)">
                    <template v-slot:option-prefix="option">
                        <img :src="option.icon"></img>
                    </template>
                    <template v-slot:option-label="option">
                        <div class="cly-vue-listbox__item-label color-blue-100">{{option.label}}</div>
                    </template>
                    <template v-slot:option-suffix="option">
                        <span class="bu-pr-2 text-medium color-blue-100">{{formatNumberSafe(option.custom.value)}}</span>
                    </template>
                </cly-listbox>
                <div v-if="locations.length < 1" class="geo-chart-empty-state bu-is-flex bu-is-justify-content-center bu-is-flex-direction-column bu-is-align-items-center">
                    <cly-empty-chart></cly-empty-chart>
                </div>
            </div>
            <div v-else>
                <div class="cly-vue-worldmap__country-info bu-p-4">
                    <div class="bu-is-flex">
                        <div class="bu-py-3">
                            <img :src="countryIcon(country)" style="width:32px; height: 32px; border-radius:32px; background-color:gray"/>
                        </div>
                        <div class="bu-pl-4 bu-is-flex bu-is-flex-justify-content-center bu-is-flex-direction-column bu-is-justify-content-space-between">
                            <span class="text-medium">
                                {{countryName}}
                            </span>
                            <div class="bu-is-flex bu-is-align-items-baseline">
                                <h2 class="bu-pr-2">
                                    {{formatNumberSafe(countryValue)}}
                                </h2>
                                <slot v-if="currentViewType === 'regions'" name="regions-info">
                                    <span class="text-medium">{{valueType}}</span>
                                </slot>
                                <slot v-else-if="currentViewType === 'cities'" name="cities-info">
                                    <span class="text-medium">{{valueType}}</span>
                                </slot>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cly-vue-worldmap__list-title bu-p-2">
                    <span class="bu-pl-2 text-uppercase text-small font-weight-bold">{{currentViewType === 'regions' ? regionsTitle:citiesTitle}}</span>
                </div>
            </div>

            <div class="geo-chart-left-side-wrapper bg-white" v-if="currentViewType === 'regions'" :style="inDetailWrapperStyle">
                <cly-listbox
                    v-if="locations.length > 0"
                    skin="jumbo"
                    height="auto"
                    :searchable="true"
                    :bordered="false"
                    :options="locations"
                    :value="focusedRegion"
                    @input="focusToRegion($event)">
                    <template v-slot:option-suffix="option">
                        <span class="bu-pr-2 text-medium color-blue-100">{{formatNumberSafe(option.custom.value)}}</span>
                    </template>
                </cly-listbox>
                <div v-if="locations.length < 1" class="geo-chart-empty-state bu-is-flex bu-is-justify-content-center bu-is-flex-direction-column bu-is-align-items-center">
                    <cly-empty-chart></cly-empty-chart>
                </div>
            </div>
            <div class="geo-chart-left-side-wrapper bg-white" v-else-if="currentViewType === 'cities'" :style="inDetailWrapperStyle">
                <cly-listbox
                    v-if="locations.length > 0"
                    skin="jumbo"
                    height="auto"
                    :searchable="true"
                    :bordered="false"
                    :options="locations"
                    :value="focusedCity"
                    @input="focusToCity($event)">
                    <template v-slot:option-suffix="option">
                        <span class="bu-pr-2 text-medium color-blue-100">{{formatNumberSafe(option.custom.value)}}</span>
                    </template>
                </cly-listbox>
                <div v-if="locations.length < 1" class="geo-chart-empty-state bu-is-flex bu-is-justify-content-center bu-is-flex-direction-column bu-is-align-items-center">\
                    <cly-empty-chart></cly-empty-chart>
                </div>
            </div>
        </div>
        <div class="bu-column cly-vue-worldmap__map-container" :class="{'bu-is-9': showNavigation}" style="height: 100%;">
            <div class="cly-vue-worldmap__detail-switch bu-m-3" v-show="inDetail && showDetailModeSelect">
                <el-radio-group v-model="detailMode" size="small">
                    <el-radio-button label="regions">Regions</el-radio-button>
                    <el-radio-button label="cities">Cities</el-radio-button>
                </el-radio-group>
            </div>
            <l-map ref="lmap" v-loading="loading" :min-zoom="minZoom" :max-zoom="maxZoom" :options="mapOptions" :max-bounds="maxBounds" style="height: 100%; width: 100%">
                <l-tile-layer pane="tilePane" v-if="showTile" :url="tileFeed" :no-wrap="true" :attribution="tileAttribution"></l-tile-layer>

                <l-geo-json
                    v-if="!inDetail"
                    pane="tilePane"
                    :geojson="geojsonHome"
                    :options="optionsHome"
                    :options-style="styleFunction">
                </l-geo-json>
                <l-geo-json
                    v-else
                    pane="tilePane"
                    :geojson="geojsonDetail"
                    :options="optionsDetail"
                    :options-style="styleFunction">
                </l-geo-json>

                <l-circle-marker
                    v-bind="circleMarkerConfig"
                    :radius="getMarkerRadius(item.value)"
                    :lat-lng="nameToLatLng[name]"
                    :fill-color="item.color || '#3388ff'"
                    :key="unique(name)"
                    @click="onMarkerClick(name)"
                    v-for="(item, name) in activeMarkers">
                    <l-tooltip :options="markerTooltipOptions" v-if="showTooltip">
                        <div class="bu-p-3 bu-is-flex bu-is-flex-direction-column">
                            <div class="bu-level-left"><img v-if="getMarkerFlag(name)" :src="getMarkerFlag(name)" class="bu-mr-2"  style="border-radius: 50%; width:16px; height:auto;"/><span class="text-medium">{{getMarkerTooltipTitle(name)}}</span></div>
                            <h4>{{formatNumberSafe(item.value)}}</h4>
                            <div class="bu-pt-1">
                                <slot name="tooltip-suffix">
                                    <span class="text-medium">{{valueType}}</span>
                                </slot>
                            </div>
                        </div>
                    </l-tooltip>
                </l-circle-marker>
                <l-control-zoom position="bottomright"></l-control-zoom>
            </l-map>
        </div>
    </div>
</div>